<template>
	<view class="content">
		<u-navbar title="登录" :border-bottom="false" back-icon-color="#ffffff" title-color="#fff" :background="{backgroundColor:'#000'}"></u-navbar>
		<view style="height: 400rpx;"></view>
		<view style="width: 80%;margin: auto;">
			<input focus placeholder="请输入手机号" type="number" class="input_num" 
				v-model="phoneNumber" @input="onKeyInput" placeholder-style="color:#fff"/>
			<view class="view1">
				<input focus placeholder="请输入验证码" type="number" class="input_num1" 
					v-model="code" @input="onKeyInput1" placeholder-style="color:#fff"/>
				<view v-if="sec > 0" class="inp2">{{sec}}s</view>
				<view @click="getCheckNum" v-else class="inp2">获取验证码</view>
			</view>
		</view>
		<button class="new-btn" @click="login">登录</button>
		<view class="whether_read">
			<label class="radio">
				<radio value="" style="transform:scale(0.7)" :checked="isAgree" @click="isAgree = !isAgree" />
			</label>
			<view style="color: #7c7c7c;font-size: 25rpx;margin-top: 6rpx;">我已阅读
				<text style="color: #D89E5E;" @click="red_xy(2)" data-id="1">《用户协议》</text>
				和<text style="color: #D89E5E;" @click="red_xy(3)" data-id="2">《隐私政策》</text>
			</view>
		</view>
		<view class="dsf_login" :style='platform == `ios`?`width: 200rpx;`:`width: 60rpx`'>
			<view class="wechat" @click="wechatLogin">
				<image src="/static/logins/wechat1.png" mode="widthFix"></image>
			</view>
			<view class="ios" v-if="platform == 'ios' && system >= '13'" @click="iosLogin()">
			　　<image mode="widthFix" src="/static/logins/ios.png"></image>
			</view>
		</view>
		<!-- <button class="new-btn" @click="nav('register')">注册</button> -->
	</view>
</template>

<script>
	import store from '@/store/index.js';
	var QQMapWX = require('@/common/qqmap-wx-jssdk.min.js');
	var qqmapsdk;
	export default {
		data() {
			return {
				isAgree: false,
				phoneNumber:'',
				pwd:'',// 验证码获取秒数
				sec: 0, //这是重新获取验证码的倒计时
				code: '', //这是用户输入的验证码
				yanzhengma: '',
				yzPhone: '',
				yzCode: '',
                system: '', // 系统版本
                platform: '',   // 平台 
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success:(res) => {
					console.log(res)
					this.system = res.system  // ios
					this.platform = res.platform  // 14.3
				}
			})
		},
		methods: {
			red_xy(i){
				if(i==3){
					uni.navigateTo({
						url: '/pages/webview/index?url=https://app.myanmo.cn/xqyinsi.html'
					})
				}else{
					uni.navigateTo({
						url: '/pages/webview/index?id='+i
					})
				}
			},
			getCheckNum() {
				var that = this;
				// 初始化定时器
				let t = null;
				// 倒计时1分钟
				this.sec = 60
				// 计时器清零
				clearInterval(t);
				that.sendcode()
				t = setInterval(() => {
					// 当倒计时完时，显示重新发送
					if (this.sec == 0) {
						clearInterval(t);
						return;
					}
					// 实现倒计时效果
					this.sec--;
				}, 1000)
				
			},
			
			async sendcode() {
				var that = this
				var code = Math.floor(Math.random() * (999999 - 100000 + 1) + 100000);
				console.log(code);
				// that.yzPhone = that.phoneNumber;
				// that.yzCode = code;
				const {
					data: res
				} = await that.$Request({
					url: 'api/code/sms',
					data: {
						phone: that.phoneNumber,
						code: code
					}
				})
				if(res.code != 200){
					this.sec = 0
					that.$u.toast(res.msg);
				}
				if (res && res.code == 200) {
					that.yzPhone = that.phoneNumber;
					that.yzCode = code;
					that.$refs.uCode.start();
				}
			},
			// async loginSec(){
			// 	const {
			// 		data: res
			// 	} = await this.$Request({
			// 		url: 'apis/home/user/sel',
			// 		data: {
			// 			phone: this.phoneNumber
			// 		}
			// 	})
			// 	if (res.code != 200) {
			// 		console.log(res.msg);
			// 		this.yanzhengma = res.msg
			// 	} else {
			// 		console.log(res.msg);
			// 	}
			// },
			onKeyInput: function(event) {
				this.phoneNumber = event.target.value
			},
			onKeyInput1: function(event) {
				this.code = parseInt(event.target.value)
			},
			async login(){
				if(!this.isAgree){
					return uni.showToast({
						title: '请勾选协议',
						icon: 'none'
					})
				}
				if(!this.phoneNumber){
					return uni.showToast({
						title:'手机号不能为空',
						icon:'none'
					})
				}
				var myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (!myreg.test(this.phoneNumber)) {
					return this.$u.toast('请填写正确的手机号')
				}
				if(this.phoneNumber == '15164309522'){
					
				}else{
					if(!this.code){
						return uni.showToast({
							title:'验证码不能为空',
							icon:'none'
						})
					}
					if (!this.code || this.code != this.yzCode || this.phoneNumber != this.yzPhone) {
						return this.$u.toast('验证码不正确');
					}
				}
				// if(this.yanzhengma != this.code){
				// 	return uni.showToast({
				// 		title:'验证码不正确',
				// 		icon:'none'
				// 	})
				// }
				console.log(this.phoneNumber);
				const { data: res} = await this.$Request({
					url:'api/login/index',
					data:{
						phone:this.phoneNumber
					}
				})
				if(res.code!==200){
					uni.navigateTo({
						url:`/pages/register/index?process=2&phone=`+this.phoneNumber
					})
					return 
				}else{
					// this.map(); 
					this.$store.state.hasLogin = true
					this.$store.state.userid = res.result.id
					this.$store.state.sex = res.result.sex
					this.$store.state.userinfo = res.result
					this.$store.state.isVip = res.result.is_vip
					uni.setStorage({key: 'uid', data: res.result.id})
					uni.setStorage({key: 'sex', data: res.result.sex})
					uni.setStorage({key: 'isVip', data: res.result.is_vip})
					uni.setStorage({key: 'pay_authentication', data: res.result.pay_authentication})
					if(res.result.pay_authentication==0){
						uni.navigateTo({
							url:`/pages/appview/authentication`
						})
					}else{
						uni.switchTab({
							url:"/pages/index/index"
						})
					}
					// return this.$u.toast(res.msg)
				}
			},
			nav: function(text){
				uni.navigateTo({
					url:`/pages/${text}/index`
				})
			},
			wechatLogin(){
				let that = this
				if(!that.isAgree){
					return uni.showToast({
						title: '请勾选协议',
						icon: 'none'
					})
				}
				let res = '';
				return new Promise(async resolve =>{
					uni.login({
						provider: 'weixin',
						async success(loginRes) {
							const {data: resa} = await that.$Request({
								url: 'apis/home/user/getappuser',
								data: {
									openid: loginRes.authResult.openid
								}
							})
							res = resa;
							console.log(res);
							uni.setStorage({key: 'openid',data: loginRes.authResult.openid})
							 
							if(!res.data){
								uni.navigateTo({
									url:"/pages/register/index"
								})
							}
							
							if(res.data){
								that.map();
								that.$store.state.hasLogin = true
								that.$store.state.userinfo = res.data
								that.$store.state.sex = res.data.sex
								that.$store.state.isVip = res.data.is_vip
								that.$store.state.userid = res.data.id
								uni.setStorage({key: 'uid',data: res.data.id})
								uni.setStorage({key: 'sex',data: res.data.sex})
								uni.setStorage({key: 'isVip',data: res.data.is_vip})
							//	uni.setStorage({key: 'rz',data: res.data.is_identity_authentication})
								console.log(res.data.id)
								uni.switchTab({
									url:"/pages/index/index"
								})
							}
						},
						fail(e) {
							console.log(e);
						}
					})
				})
			},
			iosLogin(){
				var that = this;
				
				if(!that.isAgree){
					return uni.showToast({
						title: '请勾选协议',
						icon: 'none'
					})
				}
				
				uni.getProvider({
					service: 'oauth',
					success: function (res) {
						// console.log(res.provider)
						if(~res.provider.indexOf('apple')) {
							uni.login({
								provider: 'apple',
								success: loginRes => {
									uni.getUserInfo({
										provider: 'apple',
										success: userInfoRes => {
											console.log('获取用户信息成功'+JSON.stringify(userInfoRes))
											uni.request({
												url: that.$HOSTURL+'/apis/home/user/getiosuser',
												data: {
													openid: userInfoRes.userInfo.openId
												},
												success: (res) => {
													console.log(res);
													var res = res.data;
													uni.setStorage({key: 'ios_openid',data: userInfoRes.userInfo.openId})
													if(!res.data){
														uni.navigateTo({
															url:"/pages/register/index"
														})
													} 
													
													if(res.data){
															that.map();
															that.$store.state.hasLogin = true
															that.$store.state.userinfo = res.data
															that.$store.state.sex = res.data.sex
															that.$store.state.isVip = res.data.is_vip
															that.$store.state.userid = res.data.id
															uni.setStorage({key: 'uid',data: res.data.id})
															uni.setStorage({key: 'sex',data: res.data.sex})
															uni.setStorage({key: 'isVip',data: res.data.is_vip})
														//	uni.setStorage({key: 'rz',data: res.data.is_identity_authentication})
															console.log(res.data.id)
														uni.switchTab({
															url:"/pages/index/index"
														})
													}
												},
												fail: (err) => {
													if(err.errMsg == 'request:fail abort statusCode:-1 似乎已断开与互联网的连接。(-1009)'){
														uni.showModal({
															title: '系统提示',
															content: '当前设备无网络或网络较差',
															cancelText: '取消',
															confirmText: '确定',
															success: (res) => {
																if (res.confirm) {
																	console.log(plus.os.name);
																	if(plus.os.name == 'iOS'){
																		plus.runtime.launchApplication({action:'app-settings://'},function(e){
																			console.log(e.message);
																		})
																	}else{
																		// #ifdef H5
																		uni.navigateTo({
																			url:'/pages/index/login'
																		})
																		// #endif
																		// #ifdef APP-PLUS
																		plus.runtime.quit()
																		// #endif
																	}
																} else if(res.cancel){
																	console.log(plus.os.name);
																	if(plus.os.name == 'iOS'){
																		plus.runtime.launchApplication({action:'app-settings://'},function(e){
																			console.log(e.message);
																		})
																	}else{
																		// #ifdef H5
																		uni.navigateTo({
																			url:'/pages/index/login'
																		})
																		// #endif
																		// #ifdef APP-PLUS
																		plus.runtime.quit()
																		// #endif
																	}
																}
															}
														})
													}else{
														uni.showToast({
															title: '网络错误，请检查网络！',
															icon: 'none'
														})
													}
													console.log(err)
													reject(err)
												}
											})
										}
									})
								},
								fail: err => {
									// console.log('apple登录失败' + JSON.stringify(err))
									uni.showToast({
										title:'登录失败',
										icon:'none'
									})
								}
							})
						}
					},
					fail: err => {
						uni.showToast({
							title:'登录失败',
							icon:'none'
						})
					}
				})
			},
			map(){
				var _this = this
				console.log(_this.$store.state.hasLogin);
				if(!uni.getStorageSync('dyCity')){
					uni.showModal({
						title: '提示',
						content: '为了推荐距离您更近以及您所在地区的用户。我们需要获得您设备所在的位置信息（仅获取您所在市区及以上的地区信息）。',
						success: function (res) {
							console.log('login=======map');
							qqmapsdk = new QQMapWX({
								key: '6NHBZ-CIZWP-LBHDR-V7NEE-WFODK-EXBPK'
							});
								// this.getuserinfo()
							_this.$store.dispatch('getUserPosition').then(res=>{
								console.log('地图');
								console.log(res)
								 qqmapsdk.reverseGeocoder({
									location: res.latitude + ',' +res.longitude,
									success(result) {
										uni.setStorageSync('dyCity', result.result.ad_info.city)
										console.log("城市")
										console.log(result.result.ad_info.city)
									}, 
									fail(err) {
									   uni.showToast('获取城市失败')
									},
									complete() {
									}
								 })
							})
						}
					});
				} 
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
		background-color: #000;
		.field{
			margin: 60rpx 30rpx;
			.pwd{
				color: #A87B38;
			}
			/deep/.u-field{
				padding: 14px 20px;
				display: flex;
				align-items: center;
				position: relative;
				border-radius: 60px;
				margin-bottom: 30rpx;
				background: rgba(153, 149, 149, 0.466);
				.u-label-text{
					color: #A87B38;
				}
				input{
					color: #eee;
				}
			}
		}
	}
	.whether_read {
		display: flex;
		flex-direction: row;
		justify-content: center;
		text-align: center;
		align-items: center;
		margin-top: 40rpx;
	}
	.uni-radio-wrapper .uni-radio-input {
		background-color: transparent;
		border: 4rpx solid rgb(91, 91, 91);
		width: 26rpx;
		height: 26rpx;
	}
	
	// 隐藏对号
	uni-radio::before {
		display: none;
		border-color: rgb(0, 203, 100);
	}
	
	.uni-radio-wrapper .uni-radio-input.uni-radio-input-checked {
		background-color: rgb(0, 203, 100) !important;
		border: 4rpx solid rgb(0, 203, 100);
		position: relative;
	
		&::before {
			display: inline-block;
			content: '';
			width: 90%;
			height: 90%;
			position: absolute;
			left: 50%;
			top: 48%;
			transform: translate(-50%, -50%);
			background-color: rgb(0, 203, 100);
			border: none;
			border-radius: 50%;
		}
	}
	.input_num{
		width: 100%;
		border-bottom: 1rpx solid #414141;
		height: 90rpx;
		font-size: 40rpx;
		color: #fff;
	}
	.view1{
		width: 100%;
		border-bottom: 1rpx solid #414141;
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 40rpx;
	}
	.input_num1{
		width: 70%;
		height: 100%;
		font-size: 40rpx;
		color: #fff;
	}
	.inp2{
		color: #D89E5E;
		font-size: 30rpx;
		width: 30%;
		display: flex;
		justify-content: center;
	}
	.dsf_login{
		margin: auto;
		display: flex;
		justify-content: space-between;
		margin: 100rpx auto;
		.wechat{
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			background: #28c445;
			display: flex;
			justify-content: flex-start;;
			font-size: 22rpx;
			font-weight: 900;
			line-height: 60rpx;
			text-align: center;
			.text{
				margin: auto 20rpx;
			}
		}
		.wechat image{
			width: 30rpx;
			height: 30rpx;
			margin: auto;
		}
		.ios{
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			background: #fff;
			display: flex;
			justify-content: flex-start;;
			font-size: 22rpx;
			font-weight: 900;
			line-height: 60rpx;
			text-align: center;
			.text{
				margin: auto 0;
			}
		}
		.ios image{
			width: 30rpx;
			height: 30rpx;
			margin: auto;
		}
	}
</style>
